<template>
    <div class="tip">
        <!-- 常见科室结构 -->
        <div class="other">
            <div class="header">
                <div class="left">
                    <svg t="1698736054214" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7359" width="16" height="16">
                        <path
                            d="M400.696008 129.093147c-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.984503 31.233352 31.233352 31.233352s31.233352-13.984503 31.233352-31.233352l0-30.470989C431.92936 143.078673 417.944857 129.093147 400.696008 129.093147z"
                            fill="#d81e06" p-id="7360"></path>
                        <path
                            d="M623.647823 129.093147c-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.985526 31.233352 31.233352 31.233352 17.248849 0 31.233352-13.984503 31.233352-31.233352l0-30.470989C654.881175 143.078673 640.896672 129.093147 623.647823 129.093147z"
                            fill="#d81e06" p-id="7361"></path>
                        <path
                            d="M425.695379 312.937269c11.209296 18.047028 41.974997 48.588625 86.152149 48.588625 43.958164 0 75.100442-30.308283 86.573751-48.223305 9.302877-14.528901 5.068436-33.846876-9.455349-43.149752-14.539134-9.307993-33.851992-5.063319-43.149752 9.455349-0.121773 0.198521-13.379729 19.449981-33.968649 19.449981-19.993357 0-32.428573-18.107403-33.271778-19.373233-9.17087-14.417361-28.28009-18.799158-42.829458-9.760295C421.089477 279.028994 416.591023 298.28557 425.695379 312.937269z"
                            fill="#d81e06" p-id="7362"></path>
                        <path
                            d="M564.242851 625.945145l-20.278859 0L543.963992 462.486306c0-17.253966-13.985526-31.233352-31.233352-31.233352-17.248849 0-31.233352 13.979386-31.233352 31.233352l0 163.457816-20.283975 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.029538 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L647.532813 709.234083C647.532813 663.309124 610.168834 625.945145 564.242851 625.945145zM585.066109 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L461.214337 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L440.392102 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.029538 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L585.066109 812.258505z"
                            fill="#d81e06" p-id="7363"></path>
                        <path
                            d="M250.808256 625.945145l-17.482163 0 0-266.970354c0-35.483142 28.864398-64.35368 64.343447-64.35368 17.248849 0 31.233352-13.984503 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352c-69.924559 0-126.810151 56.890708-126.810151 126.820384l0 266.970354-23.079648 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.029538 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L334.099241 709.234083C334.098217 663.309124 296.734238 625.945145 250.808256 625.945145zM271.630491 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L147.778718 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L126.956484 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.029538 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L271.630491 812.258505z"
                            fill="#d81e06" p-id="7364"></path>
                        <path
                            d="M876.565113 625.945145l-21.961174 0 0-266.970354c0-69.929676-56.890708-126.820384-126.815267-126.820384-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.984503 31.233352 31.233352 31.233352c35.483142 0 64.348564 28.869514 64.348564 64.35368l0 266.970354-18.605753 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.034655 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L959.856098 709.234083C959.854051 663.309124 922.490072 625.945145 876.565113 625.945145zM897.387347 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L773.530458 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L752.708224 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.034655 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L897.387347 812.258505z"
                            fill="#d81e06" p-id="7365"></path>
                    </svg>
                    <span>常见科室</span>
                </div>
                <div class="right">
                    <span>全部</span>
                    <svg t="1698734395962" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5050" width="16" height="16">
                        <path
                            d="M356.266667 800c-10.666667 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733333l226.133333-226.133334-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733333 17.066667-17.066667 42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733333l-256 256c-6.4 8.533333-17.066667 12.8-29.866666 12.8z"
                            p-id="5051"></path>
                    </svg>
                </div>
            </div>
            <div class="content">
                <ul class="keshi">
                    <li>神经内科</li>
                    <li>消化内科</li>
                    <li>呼吸内科</li>
                    <li>内科</li>
                    <li>神经外科</li>
                    <li>妇科</li>
                    <li>产科</li>
                    <li>儿科</li>
                </ul>
            </div>
        </div>
        <!-- 平台公告 -->
        <div class="other">
            <div class="header">
                <div class="left">
                    <svg t="1698735993826" class="icon" viewBox="0 0 1025 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6098" width="16" height="16">
                        <path
                            d="M602.368301 1023.999994c-7.288471 0-14.456471-2.650353-20.118588-7.770353L289.686891 752.941172 120.485951 752.941172c-48.429176 0-120.470588-32.105412-120.470588-120.470588l0-180.705881c0-48.429176 32.105412-120.470588 120.470588-120.470588l169.140705 0 292.562822-263.348704c8.854588-8.011294 21.564235-9.938823 32.406588-5.12C625.558889 67.70447 632.485948 78.486588 632.485948 90.352941l0 903.529406c0 11.866353-6.927059 22.708706-17.829647 27.527529C610.741006 1023.1567 606.524536 1023.999994 602.368301 1023.999994zM120.485951 391.529409c-57.344 0-60.235294 50.176-60.235294 60.235294l0 180.705881c0 57.283764 50.176 60.235294 60.235294 60.235294l180.705881 0c7.469176 0 14.637176 2.770824 20.118588 7.770353L572.250654 926.238112 572.250654 157.997176 321.370655 383.759057C315.829008 388.758586 308.661008 391.529409 301.191832 391.529409L120.485951 391.529409zM752.956535 361.411763c-7.649882 0-15.420235-2.951529-21.323294-8.794353-11.745882-11.745882-11.745882-30.84047 0-42.586353l120.470588-120.470588c11.745882-11.745882 30.84047-11.745882 42.586353 0s11.745882 30.84047 0 42.586353l-120.470588 120.470588C768.37677 358.460233 760.726888 361.411763 752.956535 361.411763zM933.662416 572.235291l-180.705881 0C736.391829 572.235291 722.838888 558.742585 722.838888 542.117644s13.552941-30.117647 30.117647-30.117647l180.705881 0C950.347593 511.999997 963.780063 525.492703 963.780063 542.117644S950.347593 572.235291 933.662416 572.235291zM873.427123 903.529406c-7.649882 0-15.420235-2.951529-21.323294-8.794353l-120.470588-120.470588c-11.745882-11.745882-11.745882-30.84047 0-42.586353s30.84047-11.745882 42.586353 0l120.470588 120.470588c11.745882 11.745882 11.745882 30.84047 0 42.586353C888.847358 900.577877 881.197475 903.529406 873.427123 903.529406z"
                            fill="#1afa29" p-id="6099"></path>
                    </svg>
                    <span>平台公告</span>
                </div>
                <div class="right">
                    <span>全部</span>
                    <svg t="1698734395962" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5050" width="16" height="16">
                        <path
                            d="M356.266667 800c-10.666667 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733333l226.133333-226.133334-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733333 17.066667-17.066667 42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733333l-256 256c-6.4 8.533333-17.066667 12.8-29.866666 12.8z"
                            p-id="5051"></path>
                    </svg>
                </div>
            </div>
            <div class="content">
                <ul class="gonggao ">
                    <li>关于延长北京大学国际医院放假的通知</li>
                    <li>北京中医药大学东方医院部分科室医生门诊医</li>
                    <li>武警总医院号源暂停更新通知</li>
                </ul>
            </div>
        </div>
        <!-- 停诊公告 -->
        <div class="other">
            <div class="header">
                <div class="left">
                    <svg t="1698737604893" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8478" width="16" height="16">
                        <path
                            d="M736 768h-448a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64z m-44.8-415.552l-147.669333-147.669333a61.994667 61.994667 0 0 1-62.848 0l-147.669334 147.669333a32.554667 32.554667 0 0 1-46.037333-46.037333l161.578667-161.578667a63.68 63.68 0 0 1 127.104 0l161.578666 161.578667a32.554667 32.554667 0 0 1-46.037333 46.037333zM565.333333 512a32 32 0 0 1 0 64h-277.333333a32 32 0 0 1 0-64h277.333333z"
                            fill="#d4237a" p-id="8479"></path>
                        <path
                            d="M853.333333 981.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V384a85.333333 85.333333 0 0 1 85.333334-85.333333h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v512a85.333333 85.333333 0 0 1-85.333334 85.333333z m21.333334-576a42.666667 42.666667 0 0 0-42.666667-42.666666H192a42.666667 42.666667 0 0 0-42.666667 42.666666v469.333334a42.666667 42.666667 0 0 0 42.666667 42.666666h640a42.666667 42.666667 0 0 0 42.666667-42.666666V405.333333z"
                            fill="#d4237a" p-id="8480"></path>
                    </svg>
                    <span>停诊公告</span>
                </div>
                <div class="right">
                    <span>全部</span>
                    <svg t="1698734395962" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5050" width="16" height="16">
                        <path
                            d="M356.266667 800c-10.666667 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733333l226.133333-226.133334-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733333 17.066667-17.066667 42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733333l-256 256c-6.4 8.533333-17.066667 12.8-29.866666 12.8z"
                            p-id="5051"></path>
                    </svg>
                </div>
            </div>
            <div class="content">
                <ul class="gonggao ">
                    <li>中国人民解放军总医院第六医院中心</li>
                    <li>首都医科大学附属北京潞河</li>
                    <li>中日友好医院中西医结合医院</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
defineOptions({
    name: "Tip"
})
</script>

<style scoped lang="scss">
.tip {
    color: #7f7f7f;
    margin-left: 10px;

    .other {
        display: flex;
        flex-direction: column;

        .header {
            display: flex;
            justify-content: space-between;
            margin: 15px 0;

            .left {
                display: flex;

                span {
                    margin-left: 5px;
                }
            }

            .right {
                display: flex;
            }
        }

        .content {
            .keshi {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                li {
                    width: 40%;
                    margin: 10px 0;
                }
            }

            .gonggao {
                display: flex;
                flex-direction: column;

                li {
                    // 不换行
                    white-space: nowrap;
                    // 溢出隐藏
                    overflow: hidden;
                    // 溢出部分变为...
                    text-overflow: ellipsis;
                    margin: 10px 0;
                }
            }
        }
    }
}
</style>